/**
 * Created by n7best
 */

import * as React from 'react';
import {
    Panel,
    PanelHeader,
    PanelBody,
    PanelFooter,
    MediaBox,
    MediaBoxHeader,
    MediaBoxBody,
    MediaBoxTitle,
    MediaBoxDescription,
    MediaBoxInfo,
    MediaBoxInfoMeta,
    Cells,
    Cell,
    CellHeader,
    CellBody,
    CellFooter,
} from '../../../build/es';
import Page from '../../component/page';

const appMsgIcon = (
    <img
        alt=""
        src=""
    />
);
const smallIcon = (
    <img
        alt=""
        src=""
        style={{
            width: '20px',
            marginRight: '5px',
            display: 'block',
        }}
    />
);

const CellMore = () => (
    <Cell access link>
        <CellBody>More</CellBody>
        <CellFooter />
    </Cell>
);

export default function PanelDemo() {
    return (
        <Page className="panel" title="Panel" subTitle="面板">
            <Panel>
                <PanelHeader>Media with image</PanelHeader>
                <PanelBody>
                    <MediaBox type="appmsg" href="#!">
                        <MediaBoxHeader>{appMsgIcon}</MediaBoxHeader>
                        <MediaBoxBody>
                            <MediaBoxTitle>Media heading</MediaBoxTitle>
                            <MediaBoxDescription>
                                Cras sit amet nibh libero, in gravida nulla.
                                Nulla vel metus scelerisque ante sollicitudin
                                commodo. Cras purus odio, vestibulum in
                                vulputate at, tempus viverra turpis. Fusce
                                condimentum nunc ac nisi vulputate fringilla.
                                Donec lacinia congue felis in faucibus.
                            </MediaBoxDescription>
                        </MediaBoxBody>
                    </MediaBox>
                    <MediaBox type="appmsg" href="#!">
                        <MediaBoxHeader>{appMsgIcon}</MediaBoxHeader>
                        <MediaBoxBody>
                            <MediaBoxTitle>Media heading</MediaBoxTitle>
                            <MediaBoxDescription>
                                Cras sit amet nibh libero, in gravida nulla.
                                Nulla vel metus scelerisque ante sollicitudin
                                commodo. Cras purus odio, vestibulum in
                                vulputate at, tempus viverra turpis. Fusce
                                condimentum nunc ac nisi vulputate fringilla.
                                Donec lacinia congue felis in faucibus.
                            </MediaBoxDescription>
                        </MediaBoxBody>
                    </MediaBox>
                </PanelBody>
                <PanelFooter href="#!">
                    <CellMore />
                </PanelFooter>
            </Panel>

            <Panel>
                <PanelHeader>Media with text</PanelHeader>
                <PanelBody>
                    <MediaBox type="text">
                        <MediaBoxTitle>Media heading</MediaBoxTitle>
                        <MediaBoxDescription>
                            Cras sit amet nibh libero, in gravida nulla. Nulla
                            vel metus scelerisque ante sollicitudin commodo.
                            Cras purus odio, vestibulum in vulputate at, tempus
                            viverra turpis. Fusce condimentum nunc ac nisi
                            vulputate fringilla. Donec lacinia congue felis in
                            faucibus.
                        </MediaBoxDescription>
                    </MediaBox>
                    <MediaBox type="text">
                        <MediaBoxTitle>Media heading</MediaBoxTitle>
                        <MediaBoxDescription>
                            Cras sit amet nibh libero, in gravida nulla. Nulla
                            vel metus scelerisque ante sollicitudin commodo.
                            Cras purus odio, vestibulum in vulputate at, tempus
                            viverra turpis. Fusce condimentum nunc ac nisi
                            vulputate fringilla. Donec lacinia congue felis in
                            faucibus.
                        </MediaBoxDescription>
                    </MediaBox>
                </PanelBody>
                <PanelFooter href="#!">
                    <CellMore />
                </PanelFooter>
            </Panel>

            <Panel>
                <PanelHeader>Small Media</PanelHeader>
                <PanelBody>
                    <MediaBox type="small_appmsg">
                        <Cells>
                            <Cell href="#!" access>
                                <CellHeader>{smallIcon}</CellHeader>
                                <CellBody>
                                    <p>Media heading</p>
                                </CellBody>
                                <CellFooter />
                            </Cell>
                            <Cell href="#!" access>
                                <CellHeader>{smallIcon}</CellHeader>
                                <CellBody>
                                    <p>Media heading</p>
                                </CellBody>
                                <CellFooter />
                            </Cell>
                        </Cells>
                    </MediaBox>
                </PanelBody>
            </Panel>

            <Panel>
                <PanelHeader>Text Media with addons</PanelHeader>
                <PanelBody>
                    <MediaBox type="text">
                        <MediaBoxTitle>Media heading</MediaBoxTitle>
                        <MediaBoxDescription>
                            Cras sit amet nibh libero, in gravida nulla. Nulla
                            vel metus scelerisque ante sollicitudin commodo.
                            Cras purus odio, vestibulum in vulputate at, tempus
                            viverra turpis. Fusce condimentum nunc ac nisi
                            vulputate fringilla. Donec lacinia congue felis in
                            faucibus.
                        </MediaBoxDescription>
                        <MediaBoxInfo>
                            <MediaBoxInfoMeta>WeUI</MediaBoxInfoMeta>
                            <MediaBoxInfoMeta>2016-8-8</MediaBoxInfoMeta>
                            <MediaBoxInfoMeta extra>More</MediaBoxInfoMeta>
                        </MediaBoxInfo>
                    </MediaBox>
                </PanelBody>
            </Panel>
        </Page>
    );
}
